<template>
  <div>
    <div>
      <div v-show="!searchParams" class="fssc-users-choice">
        <div class="fssc-users-choice_main">
          <el-tree :props="props" :height="238" :expand-on-click-node="false" lazy :load="loadNode"
            @node-click="handleNodeClick">
            <template #default="{ node }">
              <span>{{ node.label }}</span>
            </template>
          </el-tree>
        </div>
        <div v-loading="userLoading" class="fssc-users-choice_users">
          <el-radio-group v-model="radioValue">
            <div v-for="(item, index) in userList" :key="'rt' + index" class="center-ticket-choice_main_item">
              <el-radio :label="JSON.stringify(item)">
                <p class="search-list"><el-tooltip class="box-item" effect="dark"
                    :content="item.label + '_' + item.email + '( ' + (item.companyName)+(item.companyName?'_':'') + item.departmentName + ' )'" placement="top">
                    {{ item.label }}_{{ item.email }} ({{ item.companyName }}{{ item.companyName?'_':'' }}{{ item.departmentName }})
                  </el-tooltip></p>
              </el-radio>
            </div>
          </el-radio-group>
          <!-- <el-checkbox-group v-model="checkList">
          <div v-for="(item, index) in userList" :key="'rt'+index" class="center-ticket-choice_main_item">
            <el-checkbox :label="item.value">
              {{ item.label }}
            </el-checkbox>
          </div>
        </el-checkbox-group> -->
        </div>
      </div>
      <div v-loading="searchLoading" v-show="searchParams" class="fssc-users-search">
        <img v-show="!searchLoading && searchList <= 0" src="./assets/empty.png" alt="">
        <el-radio-group v-model="radioValue">
          <div v-for="(item, index) in searchList" :key="'rt' + index" class="center-ticket-choice_main_item">
            <el-radio :label="JSON.stringify(item)">
              <!-- {{ item.label }}({{ item.departmentName }}) -->
              <p class="search-list"><el-tooltip class="box-item" effect="dark"
                  :content="item.label + '_' + item.email + '( ' + (item.companyName)+(item.companyName?'_':'') + item.departmentName + ' )'"
                  placement="top">
                  {{ item.label }}_{{ item.email }} ({{ item.companyName }}{{ item.companyName?'_':'' }}{{ item.departmentName }})
                </el-tooltip></p>
            </el-radio>
          </div>
        </el-radio-group>
      </div>
    </div>
    <div class="process-dialog-user-footer">
      <div class="process-dialog-user-footer_result">
        <span>已选择：</span>
        <div v-if="radioValue" class="process-dialog-user-footer_result_item">
          {{ typeof radioValue === 'string' ? JSON.parse(radioValue).label : radioValue.label }}
        </div>
      </div>
      <div class="process-dialog-user-footer_option">
        <el-button v-loading="sureBtnLoading" type="primary" @click="confirm">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import api from '@/api'
defineProps({
  searchParams: {
    type: String,
    default: ''
  },
  sureBtnLoading: {
    type: Boolean,
    default: false
  }
})
let userList = ref([])
let searchList = ref([])
let radioValue = ref('')
let searchLoading = ref(false)
let userLoading = ref(false)
const emit = defineEmits(['handleClose', 'handleSure'])
const props = {
  value: 'id',
  label: 'label'
}
const getDeptList = async (params = {}) => {
  const data = await api.user.user_GetDept(params) || []
  const resultData = data.map((item) => {
    return {
      value: item.value,
      label: item.sapDepartmentName,
      children: item.children,
      id: item.id,
      departmentId: item.departmentId
    }
  })
  return resultData
}
const loadNode = async (node, resolve) => {
  if (node.level === 0) {
    const data = await getDeptList()
    return resolve(data)
  } else {
    let childData = []
    if (node.data) {
      childData = await getDeptList({
        parentId: node.data.value
      })
    }
    return resolve(childData)
  }
}
const handleNodeClick = async (data) => {
  userList.value = []
  userLoading.value = true
  const result = await api.user.user_GetUsers({
    departmentId: data.departmentId,
    name: data.name || ''
  }) || []
  userList.value = result.map((item) => {
    return {
      label: item.name,
      id: item.id,
      email: item.email,
      departmentName: data.label,
      companyName: item.companyName
    }
  })
  userLoading.value = false
}
const confirm = () => {
  let result = {}
  if (radioValue.value) {
    if (typeof radioValue.value === 'string') {
      result = JSON.parse(radioValue.value)
    } else {
      result = radioValue
    }
  }
  emit('handleSure', result)
}
const handleClose = () => {
  emit('handleClose')
}
const goSearch = async (name) => {
  if (!name) {
    return false
  }
  const result = await api.user.user_GetUsers({
    departmentId: '',
    name: name || ''
  })
  searchList.value = result.map((item) => {
    return {
      label: item.name,
      id: item.id,
      email: item.email,
      departmentName: item.departmentName,
      companyName: item.companyName
    }
  })
  searchLoading.value = false
}
const clearSearchList = () => {
  searchLoading.value = true
  searchList.value = []
}
defineExpose({
  radioValue,
  goSearch,
  clearSearchList
})
</script>
<style lang="scss">
.fssc-users-choice {
  display: flex;
  // padding-bottom: 30px;
  border: 1px solid #D9D9D9;
  height: 269px;
  overflow-y: auto;
  border-radius: 2px;

  .el-tree-node__content {
    position: relative;
    height: 48px;
    border-bottom: 1px solid #D9D9D9;

    // .el-checkbox{
    //   position: absolute;
    //   left: 20px;
    // }
    &:before {
      display: block;
      width: 20px;
      height: 0;
      content: '';
    }

    .el-tree-node__expand-icon {
      color: rgba(89, 89, 89, 1);
    }

    .el-tree-node__expand-icon.is-leaf {
      color: transparent
    }
  }

  .is-current>.el-tree-node__content {
    background: #F8FAFC;
    color: rgba(0, 73, 173, 1);
  }

  .el-radio-group {
    display: block;

    .is-checked {
      background: rgba(248, 250, 252, 1);
    }

    .center-ticket-choice_main_item {

      // padding-left: 27px;
      .el-radio {
        width: 100%;
        height: 48px;

        .el-radio__input {
          padding-left: 10px;
        }
      }
    }

    // flex-direction: column;
    // justify-content: flex-start;
  }

  &_main {
    // padding: 17px 24px;
    width: 374px;
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid #D9D9D9;
    flex-shrink: 0;
  }

  &_users {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}

.process-dialog-user-footer {
  margin-top: 25px;
  display: flex;
  justify-content: space-between;

  &_result {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;

    &>span {
      font-size: 14px;
      color: #595959;
    }

    &_item {
      position: relative;
      margin-right: 8px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 24px;
      padding: 0 6px;
      border-radius: 2px;
      background: #E6F7FF;
      color: rgba(0, 73, 173, 1);
      font-size: 14px;

      &>.__ui_result_icon {
        position: absolute;
        right: -6px;
        top: -6px;
        display: inline-block;
        width: 17px;
        height: 17px;
        background: url('./assets/icon-delete.png') no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
  }

  &_option {
    flex-shrink: 0;
  }
}

.fssc-users-search {
  position: relative;
  height: 269px;
  border: 1px solid #D9D9D9;
  background: #fff;

  img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .el-radio-group {
    padding: 20px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    word-break: break-all;
    height: 260px;
    overflow-y: scroll;

    .center-ticket-choice_main_item {
      margin-right: 15px;
      width: auto;
    }
  }
}

.search-list {

  span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}

.fssc-users-choice_users {
  // overflow-x: hidden;

}
</style>